<template>
  <div class="">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="资产编号" prop="assetNo">
        <el-input
          v-model="queryParams.assetNo"
          placeholder="请输入资产编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      border
      :data="list"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        key="assetNo"
        label="资产编号"
        align="center"
        prop="assetNo"
      />
      <el-table-column
        v-for="item in dynamicColumns2"
        :key="item.key"
        :label="item.label"
        align="center"
        :prop="item.key"
        min-width="100"
      >
        <template slot-scope="scope">
          <div v-for="(tig, tindex) in scope.row.ctrlInfo" :key="tindex">
            <span v-if="item.key === tig.key">{{ tig.val }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 图片上传组件
import pagination from "@/components/Pagination";
import { assetsList } from "@/api/books";
export default {
  name: "AssetTable",
  components: {
    pagination,
  },
  data() {
    const formTemplateData = [
      {
        label: "标题",
        prop: "Title",
      },
    ];
    return {
      formTemplateData: formTemplateData,
      queryParams: {
        assetNo: "",
        page: {
          searchCount: true, // 是否显示搜索数量
          current: 1, // 当前页
          size: 20,
        },
      },
      loading: false,
      list: [],
      total: 0,
      dynamicColumns2: [],
      selectList: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      }
      this.selectList = val;
      if (this.selectList.length > 0) {
        let ctrlId = this.selectList[0].ctrlId;
        let assetId = this.selectList[0].assetId;
        this.$emit("selectAsset", ctrlId, assetId);
      } else {
        this.$emit("selectAsset", "", "");
      }
    },
    /** 搜索按钮操作 */
    handleQuery(ff) {
      this.getList(true, ff);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        assetNo: "",
        page: {
          searchCount: true,
          current: 1,
          size: 20,
        },
      };
      this.list = [];
      this.$emit("selectAsset", "", "");
    },
    giveNoToSearch(assetNo) {
      this.queryParams = {
        assetNo: assetNo,
        page: {
          searchCount: true,
          current: 1,
          size: 20,
        },
      };
      this.handleQuery(true);
    },
    /** 查询菜单列表 */
    getList(falge, ff) {
      this.loading = true;
      let requestWay;
      let prams = {};
      this.queryParams.page.searchCount = falge;
      requestWay = assetsList;
      prams = {
        ...this.queryParams,
      };
      if (!prams.assetNo) {
        this.$message({
          message: "请先输入资产编号",
          type: "warning",
        });
        return;
      }
      requestWay(prams).then((res) => {
        this.loading = false;
        if (res.success) {
          this.list = res?.data ?? [];
          if (falge || falge === undefined) {
            this.total = res?.page?.total ?? 0;
          }
          if (ff === true) {
            // 传入数据触发勾选多选框
            if (this.list.length > 0) {
              setTimeout(() => {
                this.$refs.multipleTable.toggleRowSelection(this.list[0], true);
                this.selectList = [this.list[0]];
                let ctrlId = this.selectList[0].ctrlId;
                let assetId = this.selectList[0].assetId;
                this.$emit("selectAsset", ctrlId, assetId);
              }, 100);
            }
          }
          this.generateColumns(this.formTemplateData, 2);
        }
      });
    },
    getListpagination() {
      this.getList(false);
    },
    generateColumns(target, falge) {
      this[`dynamicColumns${falge}`] = [];
      target.map((item) => {
        const obj = {
          label: item.label,
          key: item.prop,
        };
        this[`dynamicColumns${falge}`].push(obj);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table thead {
  .el-table-column--selection {
    .cell {
      display: none;
    }
  }
}
</style>
